<!-- 全流程分析组件 -->
<template>
  <div class="full-process-analysis">
    <div class="analysis-header">
      <div class="header-left">
        <a-button class="back-btn" type="primary" shape="circle" @click="goBack">
          <template #icon><left-outlined /></template>
        </a-button>
        <h2>候选人评估报告</h2>
      </div>
      <div class="total-score-card" v-if="analysisData">
        <div class="total-score">
          <div class="score-value">{{ analysisData.totalScore?.toFixed(1) }}</div>
          <div class="score-label">总评分</div>
        </div>
        <div class="total-level">
          <div class="level-value">{{ analysisData.totalGrade }}</div>
          <div class="level-label">等级</div>
        </div>
      </div>
    </div>

    <!-- 导航链接 -->
    <div class="navigation-links">
      <a-button
        v-for="item in navigationLinks"
        :key="item.key"
        type="text"
        :disabled="item.disabled"
        @click="navigateTo(item)"
        class="nav-link-btn"
      >
        <template #icon><component :is="item.icon" /></template>
        {{ item.name }}
      </a-button>
    </div>

    <div class="radar-section" v-if="analysisData">
      <v-chart class="radar-chart" :option="radarOption" autoresize />
    </div>

    <div class="dimension-details" v-if="analysisData">
      <div v-for="(item, index) in dimensionItems" :key="index" class="dimension-item">
        <div class="dimension-header">
          <div class="dimension-left">
            <span class="dimension-icon">▶</span>
            <span class="dimension-title">{{ item.title }}</span>
          </div>
          <div class="dimension-right">
            <div class="rating-stars">
              <a-rate :value="item.score / 4" disabled allow-half />
            </div>
            <div class="score-display">
              <span class="score-number">{{ item.score?.toFixed(1) }}</span>
              <span class="score-total">/20</span>
            </div>
          </div>
        </div>
        <div class="dimension-content">
          <p>{{ item.evaluation }}</p>
        </div>
      </div>
    </div>

    <div class="summary-section" v-if="analysisData">
      <a-card title="总体评价" :bordered="false">
        <p>{{ analysisData.summary }}</p>
      </a-card>
    </div>

    <div v-if="loading" class="loading-container">
      <a-spin tip="加载中..."></a-spin>
    </div>
  </div>
</template>

<script setup lang="ts">
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { RadarChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  RadarComponent,
} from 'echarts/components'
import VChart from 'vue-echarts'
import { ref, reactive, computed, onMounted, shallowRef } from 'vue'
import {
  LeftOutlined,
  FileTextOutlined,
  EditOutlined,
  LaptopOutlined,
  TeamOutlined,
} from '@ant-design/icons-vue'
import { useRoute, useRouter } from 'vue-router'
import { getFullProcessInterviewAnalyzeResultUsingGet } from '@/api/fullInterviewController'
import { message } from 'ant-design-vue'

// 初始化ECharts组件
use([CanvasRenderer, RadarChart, TitleComponent, TooltipComponent, LegendComponent, RadarComponent])

// 路由实例
const router = useRouter()
const route = useRoute()
const fullProcessInterviewId = route.query.id || route.query.fullProcessInterviewId

// 加载状态
const loading = ref(true)

// 返回上一页
const goBack = () => {
  router.back()
}

// 分析数据 - 初始化为空对象，等待API数据填充
const analysisData = reactive({
  professionalKnowledgeScore: 0,
  professionalKnowledgeComment: '',
  skillMatchScore: 0,
  skillMatchComment: '',
  communicationScore: 0,
  communicationComment: '',
  logicalThinkingScore: 0,
  logicalThinkingComment: '',
  stressHandlingScore: 0,
  stressHandlingComment: '',
  totalScore: 0,
  totalGrade: '',
  summary: '',
  resumeId: null,
  examId: null,
  aiInterviewId: null,
  hrInterviewId: null,
})

// 导航链接
const navigationLinks = computed(() => [
  {
    key: 'resume',
    name: '简历分析',
    path: '/api/analyze/resume',
    query: { id: analysisData.resumeId },
    disabled: !analysisData.resumeId,
    icon: shallowRef(FileTextOutlined),
  },
  {
    key: 'written',
    name: '笔试分析',
    path: '/api/written/analyze',
    query: { examId: analysisData.examId },
    disabled: !analysisData.examId,
    icon: shallowRef(EditOutlined),
  },
  {
    key: 'tech',
    name: '技术面试分析',
    path: '/api/tec/analyze',
    query: { id: analysisData.aiInterviewId },
    disabled: !analysisData.aiInterviewId,
    icon: shallowRef(LaptopOutlined),
  },
  {
    key: 'hr',
    name: 'HR面试分析',
    path: '/api/hr/interview/analyze',
    query: { id: analysisData.hrInterviewId },
    disabled: !analysisData.hrInterviewId,
    icon: shallowRef(TeamOutlined),
  },
])

const navigateTo = (link: any) => {
  if (!link.disabled) {
    router.push({ path: link.path, query: link.query })
  }
}

// 维度项目列表
const dimensionItems = computed(() => [
  {
    title: '专业知识',
    score: analysisData.professionalKnowledgeScore,
    evaluation: analysisData.professionalKnowledgeComment,
  },
  {
    title: '技能匹配',
    score: analysisData.skillMatchScore,
    evaluation: analysisData.skillMatchComment,
  },
  {
    title: '语言表达',
    score: analysisData.communicationScore,
    evaluation: analysisData.communicationComment,
  },
  {
    title: '逻辑思维',
    score: analysisData.logicalThinkingScore,
    evaluation: analysisData.logicalThinkingComment,
  },
  {
    title: '应变抗压',
    score: analysisData.stressHandlingScore,
    evaluation: analysisData.stressHandlingComment,
  },
])

// 雷达图配置 - 调整max值为20
const radarOption = computed(() => ({
  color: ['#3B7DFF', '#975fe4'],
  title: {
    text: '能力维度分析',
    left: 'center',
    top: 10,
    textStyle: {
      fontSize: 18,
      fontWeight: 'bold',
      color: '#333',
    },
  },
  tooltip: {
    trigger: 'item',
  },
  legend: {
    bottom: 5,
    itemWidth: 12,
    itemHeight: 12,
    textStyle: {
      color: '#666',
    },
    data: ['候选人得分', '标准分值'],
  },
  radar: {
    radius: '65%',
    center: ['50%', '55%'],
    shape: 'circle',
    splitNumber: 4,
    axisName: {
      color: '#555',
      fontSize: 13,
      fontWeight: 500,
      padding: [0, 0, 0, 0],
    },
    splitArea: {
      areaStyle: {
        color: ['rgba(255, 255, 255, 0.5)', 'rgba(240, 245, 255, 0.3)'],
      },
    },
    splitLine: {
      lineStyle: {
        color: '#ddd',
        opacity: 0.6,
      },
    },
    axisLine: {
      lineStyle: {
        color: '#ddd',
        opacity: 0.6,
      },
    },
    indicator: [
      { name: '专业知识', max: 20 },
      { name: '技能匹配', max: 20 },
      { name: '语言表达', max: 20 },
      { name: '逻辑思维', max: 20 },
      { name: '应变抗压', max: 20 },
    ],
  },
  series: [
    {
      name: '能力评估',
      type: 'radar',
      data: [
        {
          value: [
            analysisData.professionalKnowledgeScore,
            analysisData.skillMatchScore,
            analysisData.communicationScore,
            analysisData.logicalThinkingScore,
            analysisData.stressHandlingScore,
          ],
          name: '候选人得分',
          symbol: 'circle',
          symbolSize: 7,
          lineStyle: {
            width: 2,
          },
          areaStyle: {
            color: 'rgba(59, 125, 255, 0.2)',
          },
        },
        {
          value: [16, 16, 16, 16, 16],
          name: '标准分值',
          symbol: 'circle',
          symbolSize: 6,
          lineStyle: {
            width: 2,
            type: 'dashed',
          },
          areaStyle: {
            color: 'rgba(151, 95, 228, 0.1)',
          },
        },
      ],
    },
  ],
}))

onMounted(async () => {
  try {
    loading.value = true

    if (!fullProcessInterviewId) {
      message.error('缺少面试ID参数')
      return
    }

    const response = await getFullProcessInterviewAnalyzeResultUsingGet({
      fullProcessInterviewId: fullProcessInterviewId as any,
    })

    if (response && response.data) {
      // 更新响应式数据
      Object.assign(analysisData, response.data)
      // 使用假数据确保链接可用
      if (!analysisData.resumeId) analysisData.resumeId = 'mock-resume-id'
      if (!analysisData.examId) analysisData.examId = 'mock-exam-id'
      if (!analysisData.aiInterviewId) analysisData.aiInterviewId = 'mock-ai-interview-id'
      if (!analysisData.hrInterviewId) analysisData.hrInterviewId = 'mock-hr-interview-id'
    } else {
      message.error('获取分析数据失败')
    }
  } catch (error) {
    console.error('获取分析数据出错:', error)
    message.error('获取分析数据出错')
  } finally {
    loading.value = false
  }
})
</script>

<style scoped>
.full-process-analysis {
  max-height: 95vh;
  overflow-y: auto;
  padding: 30px;
  background-color: #f9fafc;
  border-radius: 12px;
  min-width: 100vh;
  margin: 0 auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  position: relative;
}

.analysis-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ebeef5;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.back-btn {
  font-size: 14px;
  margin-right: 5px;
  background-color: #3b7dff;
}

.analysis-header h2 {
  font-size: 24px;
  color: #333;
  margin: 0;
  font-weight: 600;
}

.total-score-card {
  display: flex;
  gap: 15px;
}

.total-score,
.total-level {
  text-align: center;
  padding: 12px 20px;
  min-width: 110px;
  border-radius: 10px;
  background: linear-gradient(135deg, #fff 0%, #f5f7fd 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.score-value {
  font-size: 30px;
  font-weight: 700;
  color: #3b7dff;
  line-height: 1.2;
  margin-bottom: 6px;
}

.level-value {
  font-size: 30px;
  font-weight: 700;
  color: #ff6a3c;
  line-height: 1.2;
  margin-bottom: 6px;
}

.score-label,
.level-label {
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.radar-section {
  height: 450px;
  margin: 10px 0 30px;
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.radar-chart {
  width: 100%;
  height: 100%;
}

.dimension-details {
  margin-bottom: 30px;
}

.dimension-item {
  background-color: white;
  border-radius: 10px;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  transition: transform 0.2s, box-shadow 0.2s;
}

.dimension-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.dimension-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background-color: #fff;
  border-bottom: 1px solid #f0f2f7;
}

.dimension-left {
  display: flex;
  align-items: center;
}

.dimension-icon {
  color: #3b7dff;
  margin-right: 10px;
  font-size: 14px;
}

.dimension-title {
  font-weight: 600;
  font-size: 16px;
  color: #333;
}

.dimension-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.rating-stars {
  display: flex;
  align-items: center;
}

.score-display {
  display: flex;
  align-items: center;
  background-color: #f0f5ff;
  border-radius: 20px;
  padding: 5px 12px;
}

.score-number {
  font-weight: 700;
  color: #3b7dff;
  font-size: 16px;
}

.score-total {
  color: #8ca8df;
  font-size: 14px;
  margin-left: 2px;
}

.dimension-content {
  padding: 15px 20px;
  color: #5c6a82;
  line-height: 1.6;
  font-size: 14px;
  background-color: #fafbfd;
}

.summary-section {
  margin-top: 30px;
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}

:deep(.ant-rate) {
  color: #ffba17;
  font-size: 16px;
}

:deep(.ant-rate-star) {
  margin-right: 4px;
}

:deep(.ant-card) {
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  border: none;
}

:deep(.ant-card-head) {
  padding: 0 20px;
  min-height: 54px;
  border-bottom: 1px solid #f0f2f7;
}

:deep(.ant-card-head-title) {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

:deep(.ant-card-body) {
  padding: 20px;
  color: #5c6a82;
  line-height: 1.6;
}

.navigation-links {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 30px;
}

.nav-link-btn {
  font-weight: 500;
  color: #555;
}

.nav-link-btn:hover:not(:disabled) {
  color: #3b7dff;
  background-color: #f0f5ff;
}
</style>
